<template>
  <div class="authorization" id="bigBox">
    <div class="div-box">
      <div v-if="isdisabled" @click.stop="getFile(fileinfoList[0],0)" class="noclick-tip"></div>
      <gz-checker v-else v-model="selected"></gz-checker>
      <div class="file-box">
        <span class="tip_text">使用此服务需您本人同意并签署</span>
        <span class="file" v-for="(item,index) in fileinfoList" :key="index" @click="getFile(item,index)">
          <span :style="item.read?'color:#969799':''">《{{ item.name }}》{{ index == (fileinfoList.length - 1) ? ',' : '、' }}</span>
        </span>
        <span class="tip_text">并愿意遵守相关规则。</span>
      </div>
    </div>
    <!--    <div class="modal-box-bg" v-if="modal"></div>-->

    <!-- 挂载到 body 节点下 -->
    <van-popup v-model="modal" :style="{ height: '100%',width:'100%' }" get-container="#bigBox">
      <div id="modalId" class="modal-box">
        <div class="title">
          <div style="width: 2rem" @click="modal=false">
            <van-icon name="cross" size="2rem"/>
          </div>
          <p>阅读并签署以下协议</p>
          <div style="width: 2rem"></div>
        </div>
        <div class="content" ref="pdfContent" @scroll.passive="getScroll($event)">
          <pdf v-if="contentType=='pdf'" :src="pdfUrl" v-for="i in numPages" :key="i" :page="i" ref="efvadafve"></pdf>
          <div v-if="contentType=='text'" style="height:auto;position: relative;padding:1.6rem 2rem">
            <h3 style="text-align: center">《{{ name }}》</h3>
            <div style="margin-bottom: 2rem;text-indent:32px;">
              <span v-html="wordContent.replace(/\n/g, '<br>')"></span>
            </div>
            <!--          <div style="display: flex;align-items: center;justify-content: flex-end;">-->
            <!--            <div style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;width: 210px">-->
            <!--              <p>签名：{{ showData.cardName }}</p>-->
            <!--              <p>证件号码：{{ showData.cardCode }}</p>-->
            <!--            </div>-->
            <!--          </div>-->
          </div>
        </div>
        <div class="footer">
          <!--        <x-button type="warn" action-type="button" @click.native="finish" :disabled="!finished"> {{ count ? count + ' s ' : '' }}阅读完成{{ nextPage < fileinfoList.length ? '，进入下一份' : '' }}</x-button>-->
          <x-button type="warn" action-type="button" @click.native="finish" :disabled="!finished">
            <span v-if="!finished">
              {{ count ? count + 's' : "" }}
              请滑动至底部完成阅读
              <span v-if="fileinfoList.length>1">({{ nextPage + '/' + fileinfoList.length }})</span>
            </span>
            <span v-else>{{ nextPage < fileinfoList.length ? "阅读完成，进入下一份(" + nextPage + '/' + fileinfoList.length + ")" : '我同意并签署' }}</span>
          </x-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
/**
 * <gz-authorization :fileinfo="[
 {name:'对外提供个人信息授权书', key: 'network'},
 {name:'人脸识别授权书', key: 'faceRecognition'},
 {name:'个人征信客户授权书', key: 'creditInvestigation'},
 {name:'个人信息及敏感信息授权书', key: 'sensitive'},
 {name:'纳税人涉税信息查询授权书', key: 'information'}
 ]"        :identityinfo="{personalFlag:true,xtlsh:'123456',cardName:'000101',cardCode:'2111232234324234',authorizedName:'zz'}"></gz-authorization>
 */
import Vue from 'vue'
import gzChecker from '@/components/customize/gz-checker'
import pdf from 'vue-pdf-signature'
// 解决部分文学不显示的问题
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'

export default {
  name: 'authorization',
  props: ['fileinfo', 'value', 'identityinfo', 'disabled', 'useAddress', 'fileName', 'authmaintype'],
  /*
   fileinfo[{name:文件名,key:文件获取接口传值}]
   //参数：fileType （文件类型）[
     network（“对外提供个人信息授权书（网络版）.pdf”）,
     information（“纳税人（个人）涉税信息查询授权书（适用于个人类贷款业务）.pdf”)
     sensitive（“个人信息及敏感信息授权书.pdf”），
     faceRecognition（“人脸识别授权书.pdf”）
     creditInvestigation（“个人征信业务授权书（网络版）.pdf”）
   ]
   identityinfo{
     参数：personalFlag（是否个人授权书）
       {“true”,“false”}
     参数：xtlsh（系统流水号）
     参数：authorizedName（客户姓名）
     参数：cardName （身份证类型名称）
     参数：cardCode（身份证号）
   }
   */
  components: {
    gzChecker,
    pdf
  },
  data() {
    return {
      selected: this.value == 1 ? true : false,
      // fileinfoList: this.fileinfo,
      fileinfoList: [],
      // fileinfo:[
      //   {name:'对外提供个人信息授权书', key: '1'},
      //   {name:'个人信息授权书', key: '2'},
      //   {name:'个人征信客户授权书', key: '3'},
      //   {name:'敏感个人信息授权书', key: '4'},
      //   {name:'纳税人涉税信息查询授权书', key: '5'}
      // ],
      modal: false,
      count: null,
      name: '',
      finished: false,
      isdisabled: this.value == 1 ? false : true,  //未阅读不可点
      modalIndex: 0,//当前阅读
      numPages: 1,
      pdfUrl: '',
      nextPage: 0,
      wordContent: '',
      scrollBottom: 100,
      contentType: 'text',//当前文件是固定值还是pdf格式，text/pdf
    }
  },
  created() {
    let content = '尊敬的客户：为维护您的合法权益，请在签署本授权书前，仔细阅读本授权书各条款并特别关注黑体字部分，了解您在授权书中的权利和义务。一旦您勾选同意本授权书并确认提交，即意味着您已充分理解本授权书所有条款的含义及相应的法律后果，同意向国家税务总局贵州省税务局、XX银行股份有限公司给予本授权书项下各项授权，且即使您的个人贷款申请未被审核通过，本授权书各项授权有效性不受影响。如有任何疑问，请向国家税务总局贵州省税务局或XX银行股份有限公司（客服电话 96655）进行咨询。\n' +
      '\n' +
      '致：国家税务总局贵州省税务局、XX银行股份有限公司\n' +
      '鉴于本人主动申请XX银行股份有限公司个人贷款服务，为便于XX银行股份有限公司客观、准确地评估本人的信用等级和授信额度，并为本人提供高效的贷后服务。现本人就XX银行股份有限公司个人贷款管理需查询本人涉税类数据信息事宜授权如下：\n' +
      '一、本人同意授权：XX银行股份有限公司（包括各分支机构） 可根据国家有关规定依法采集、查询、使用、打印、保存本人的个人税务信息，包括但不限于收入额、所得项目、实缴（退）金额、入（退）库日期、税款所属期等相关必要信息，用于审核本人个人贷款申请及贷后管理等用途，其中包括但不限于授信业务申请、授信审批、额度核定和调整、贷后管理（包括账务催收）、资信核查（包括持续跟踪本人信用状况）、用卡安全服务、异议处理、客户服务等目的。\n' +
      '二、本人同意授权：XX银行股份有限公司（包括各分支机构） 可将本人使用个人信贷服务产生的信息，包括本人姓名、身份证号、授信金额、授信利率、担保方式、授信余额、授信期限、还款、失信情况等信息传输给国家税务总局贵州省税务局，便于向本人提供更加优质的银税互动合作项目所涉服务。\n' +
      '三、本人同意授权：国家税务总局贵州省税务局可将本人税务信息，包括但不\n' +
      ' \n' +
      '限于收入额、所得项目、实缴（退）金额、入（退）库日期、税款所属期等相关必要信息，提供给XX银行股份有限公司（包括各分支机构）用于本人的个人贷款服务。\n' +
      '四、国家税务总局贵州省税务局提供本人上述个人税务信息给XX银行股份有限公司（包括各分支机构）、XX银行股份有限公司（包括各分支机构）使用和分析本人上述个人信息并传输给国家税务总局贵州省税务局仅作个人贷款服务分析所用，上述信息处理者需严格保护本人的上述个人税务信息，同时不得违反国家税务总局贵州省税务局、XX银行股份有限公司与本人之间的保密义务。\n' +
      '五、若本人在XX银行股份有限公司申请的个人贷款业务未实际发生、未获批准办理， 本授权书及本人涉税类数据信息等资料无须退回本人，由XX银行股份有限公司依法处理。\n' +
      '六、本授权书内容与相关业务的合同条款不一致的，无论相关合同在本授权书之前或之后签署，均应以本授权书的内容为准，但相关合同条款明确约定是针对本授权书内容所做修订的除外。\n' +
      '七、本人在本授权书中享有撤回同意权，但撤回同意不影响撤回前基于本人的同意已进行的个人信息处理活动的效力。\n' +
      '八、本授权书有效期自签署之日起至本人与银行股份有限公司所有相关业务终结之日止，有效期内因业务需要可重复查询。\n' +
      '授权人声明：本人已仔细阅读以上所有条款（特别是黑体字条款），已经完全知悉并充分理解本授权书的条款内容及相应的法律后果，并自愿作出上述授权、承诺和声明。\n'

    this.fileinfo&&this.fileinfo.forEach(res => {
      console.log("hhhhhhhhhhhhh", res)
      res['content'] = content
      res['type'] = 'text'
      this.fileinfoList.push(res)
    })
    this.getContent();
    // let faceFileinfoLis = [
    //   {
    //     name: this.fileName || '人脸影像信息收集使用授权书',
    //     key: 'faceRecognition',
    //     content: '尊敬的客户：为维护您的合法权益，请在签署本授权书前，仔细阅读本授权书各条款并特别关注黑体字部分，了解您在授权书中的权利和义务。一旦您勾选同意本授权书并确认提交，即意味着您已充分理解本授权书所有条款的含义及相应的法律后果，同意向国家税务总局贵州省税务局、XX银行股份有限公司给予本授权书项下各项授权，且即使您的个人贷款申请未被审核通过，本授权书各项授权有效性不受影响。如有任何疑问，请向国家税务总局贵州省税务局或XX银行股份有限公司（客服电话 96655）进行咨询。\n' +
    //       '\n' +
    //       '致：国家税务总局贵州省税务局、XX银行股份有限公司\n' +
    //       '鉴于本人主动申请XX银行股份有限公司个人贷款服务，为便于XX银行股份有限公司客观、准确地评估本人的信用等级和授信额度，并为本人提供高效的贷后服务。现本人就XX银行股份有限公司个人贷款管理需查询本人涉税类数据信息事宜授权如下：\n' +
    //       '一、本人同意授权：XX银行股份有限公司（包括各分支机构） 可根据国家有关规定依法采集、查询、使用、打印、保存本人的个人税务信息，包括但不限于收入额、所得项目、实缴（退）金额、入（退）库日期、税款所属期等相关必要信息，用于审核本人个人贷款申请及贷后管理等用途，其中包括但不限于授信业务申请、授信审批、额度核定和调整、贷后管理（包括账务催收）、资信核查（包括持续跟踪本人信用状况）、用卡安全服务、异议处理、客户服务等目的。\n' +
    //       '二、本人同意授权：XX银行股份有限公司（包括各分支机构） 可将本人使用个人信贷服务产生的信息，包括本人姓名、身份证号、授信金额、授信利率、担保方式、授信余额、授信期限、还款、失信情况等信息传输给国家税务总局贵州省税务局，便于向本人提供更加优质的银税互动合作项目所涉服务。\n' +
    //       '三、本人同意授权：国家税务总局贵州省税务局可将本人税务信息，包括但不\n' +
    //       ' \n' +
    //       '限于收入额、所得项目、实缴（退）金额、入（退）库日期、税款所属期等相关必要信息，提供给XX银行股份有限公司（包括各分支机构）用于本人的个人贷款服务。\n' +
    //       '四、国家税务总局贵州省税务局提供本人上述个人税务信息给XX银行股份有限公司（包括各分支机构）、XX银行股份有限公司（包括各分支机构）使用和分析本人上述个人信息并传输给国家税务总局贵州省税务局仅作个人贷款服务分析所用，上述信息处理者需严格保护本人的上述个人税务信息，同时不得违反国家税务总局贵州省税务局、XX银行股份有限公司与本人之间的保密义务。\n' +
    //       '五、若本人在XX银行股份有限公司申请的个人贷款业务未实际发生、未获批准办理， 本授权书及本人涉税类数据信息等资料无须退回本人，由XX银行股份有限公司依法处理。\n' +
    //       '六、本授权书内容与相关业务的合同条款不一致的，无论相关合同在本授权书之前或之后签署，均应以本授权书的内容为准，但相关合同条款明确约定是针对本授权书内容所做修订的除外。\n' +
    //       '七、本人在本授权书中享有撤回同意权，但撤回同意不影响撤回前基于本人的同意已进行的个人信息处理活动的效力。\n' +
    //       '八、本授权书有效期自签署之日起至本人与银行股份有限公司所有相关业务终结之日止，有效期内因业务需要可重复查询。\n' +
    //       '授权人声明：本人已仔细阅读以上所有条款（特别是黑体字条款），已经完全知悉并充分理解本授权书的条款内容及相应的法律后果，并自愿作出上述授权、承诺和声明。\n'
    //   },
    // ]
    // this.fileinfoList = faceFileinfoLis
  },
  mounted() {

  },
  methods: {
    getScroll(event) {
      // 滚动条距离底部的距离scrollBottom
      this.scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight;
      // //console.log("当前距离底部距离：------", this.scrollBottom)
      if (!this.finished && this.scrollBottom < 10 && this.count <= 0) {
        this.finished = true
      }
    },
    // 动态获取授权书内容
    getContent() {
      //根据是否传递fileinfo来判断是否动态展示pdf
      if(this.authmaintype){
        let param = {
          instId: this.identityinfo.xtlsh, //流水号【可以业务对象中取】
          productKey: this.identityinfo.productKey,   //产品编号【可以业务对象中取】
          authMainType: '0' + this.authmaintype,		   //01:个人；02：配偶；03：企业
          authorizedName: this.identityinfo.authorizedName,	   //姓名【可以业务对象中取】
          cardCode: this.identityinfo.cardCode,//证件号码【可以业务对象中取】
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        var defer = this.baseService.post(this.__ctx + "/pdf/synthesis", param);
        Vue.tools.getResultData(defer, (data)=> {
          if(data&&data.length>0) this.fileinfoList = [];//如果接口返回数据，清空默认固定值，只展示动态内容
          data&&data.forEach(res => {
            const item = {
              name: res.authBookName.split('.')[0],
              content: "data:application/pdf;base64," + res.base64,
              type: 'pdf'
            }
            this.fileinfoList.push(item)
          })
          this.$vux.loading.hide();
        }, "alert", function () {
          this.$vux.loading.hide()
        });
      }
    },
    // getObjectURL(data) {
    //   var url = null
    //   if (window.createObjectURL !== undefined) { // basic
    //     url = window.createObjectURL(data)
    //   } else if (window.webkitURL !== undefined) { // webkit or chrome
    //     try {
    //       url = window.webkitURL.createObjectURL(data)
    //     } catch (error) {
    //       console.log(error)
    //     }
    //   } else if (window.URL !== undefined) { // mozilla(firefox)
    //     try {
    //       url = window.URL.createObjectURL(data)
    //     } catch (error) {
    //       console.log(error)
    //     }
    //   }
    //   return url
    // },
    // 阅读未签名的文档
    getFile(item, index) {
      if (this.disabled) {
        return false
      }
      let that = this;
      if(this.authmaintype){
        this.pdfUrl = item.content; 
        this.src = pdf.createLoadingTask(this.pdfUrl)
        this.src.promise.then(pdf => {
          this.numPages = pdf.numPages // 这里拿到当前pdf总页数
        })
      }else{
        that.numPages = 0;  //每次阅读时文档页数置0  防止查看不是第一页
      }
      that.nextPage = this.fileinfoList.filter(itemChild => itemChild.read).length;//已同意的计数需要根据已经同意的计算
      if(!item.read) that.nextPage++;
      that.contentType = item.type
      that.name = item.name;
      that.wordContent = item.content
      that.modalIndex = index;
      that.finished = false;
      that.modal = true

      that.$nextTick(() => {
        that.$refs.pdfContent.scrollTop = 0
      })

      //console.log("当前点击--------", that.$refs)
      // document.body.scrollTop = 0
      // firefox浏览器中是这句
      // document.documentElement.scrollTop = 0
      that.count = 5
      let timer = setInterval(() => {
        that.count--
        if (that.count <= 0) {
          that.count = null
          clearInterval(timer)
          // this.finished = true
          // if (that.scrollBottom > 10) {
          //   this.$Message.warning('请滑动到底部，阅读全部规则');
          // } else {
          //   this.finished = true
          // }
          if (that.scrollBottom < 10) {
            this.finished = true
          }
        }
      }, 1000)

      let param = {
        fileType: item.key,
        personalFlag: that.identityinfo.personalFlag,
        xtlsh: that.identityinfo.xtlsh,
        cardName: that.identityinfo.cardName,
        cardCode: that.identityinfo.cardCode,
        authorizedName: that.identityinfo.authorizedName,
        cardType: '身份证',
        tel: that.identityinfo.tel,
        agree: 'false'  //首次阅读时传false  返回未签名的文档.
      }
      // that.$vux.loading.show({
      //   text: '加载中'
      // })
      // var defer = that.baseService.post(that.__ctx + "/pdf/synthesis", param);
      // Vue.tools.getResultData(defer, function (data) {
      //   that.modal = true;
      //   that.$vux.loading.hide();
      //   that.pdfUrl = pdf.createLoadingTask({url: data, cMapPacked: true, CMapReaderFactory});
      //   that.pdfUrl.promise.then(pdf => {
      //     that.nextPage++;
      //     that.numPages = pdf.numPages // 这里拿到当前pdf总页数
      //     that.count = item.time || 5
      //     let timer = setInterval(() => {
      //       that.count--;
      //       if (that.count == 0 || that.count < 0) {
      //         that.finished = true;
      //         that.count = null;
      //         clearInterval(timer)
      //       }
      //     }, 1000)
      //   })
      // }, "alert", function () {
      //   that.$vux.loading.hide()
      // });
    },
    finish() {
      this.fileinfoList[this.modalIndex].read = true;  //阅读完后赋true
      this.finished = false;  //防止多次点击
      this.getAgreeFile(this.fileinfoList[this.modalIndex]);
    },
    // 阅读后需要传agree: 'true'去签名
    getAgreeFile(item) {
      this.isdisabled = false;
      for (var i = 0; i < this.fileinfoList.length; i++) {   //如果有未阅读的文档继续查看
        if (!this.fileinfoList[i].read) {
          this.isdisabled = true;
          this.numPages = 0;
          this.getFile(this.fileinfoList[i], i);
          return;
        }
      }

      if (this.isdisabled === false) {  //全部阅读完毕勾选
        this.modal = false;
        this.selected = true;
        this.$emit('input', true)
      }

      var that = this;
      let param = {
        fileType: item.key,
        personalFlag: that.identityinfo.personalFlag,
        xtlsh: that.identityinfo.xtlsh,
        cardName: that.identityinfo.cardName,
        cardCode: that.identityinfo.cardCode,
        authorizedName: that.identityinfo.authorizedName,
        cardType: '身份证',
        tel: that.identityinfo.tel,
        agree: 'true'
      }
      // var defer = that.baseService.post(that.__ctx + "/pdf/synthesis", param);
      // Vue.tools.getResultData(defer, function (data) {
      //   that.isdisabled = false;
      //   for (var i = 0; i < that.fileinfoList.length; i++) {   //如果有未阅读的文档继续查看
      //     if (!that.fileinfoList[i].read) {
      //       that.isdisabled = true;
      //       that.numPages = 0;
      //       that.getFile(that.fileinfoList[i], i);
      //       return;
      //     }
      //   }
      //   if (that.isdisabled == false) {  //全部阅读完毕勾选
      //     that.modal = false;
      //     that.selected = true;
      //     that.$emit('input', true)
      //   }
      // }, "alert", function () {
      //   that.finished = true;
      // });
    },
    prohibitClickFn() {
      this.$vux.toast.show({
        text: '请先阅读全部规则',
        type: 'warn'
      })
    }
  },
  watch: {
    selected(val) {
      if (!val) {  //有种情况返回false也代表选中   所以返回空
        this.$emit('input', '')
      } else {
        this.$emit('input', val)
      }
    },
    modal(val) {          //解决滑动透传问题
      let body = document.getElementsByTagName('body')[0]
      if (val) {
        body.style.overflow = 'hidden'
      } else {
        body.style.removeProperty("overflow")
      }
    }
  }
}
</script>

<style lang="less" scoped>
.authorization {
  .div-box {
    text-align: left;
    padding: 1rem 2rem;
    position: relative;
    font-size: 1.2rem;
    line-height: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .gz-checkbox-box {
      //position: absolute;
      //left: 1.2rem;
      //top: 1.3rem;
      display: unset;
      height: 1.6rem;
      margin-right: 1.2rem;
    }

    .noclick-tip {
      width: 1.5rem;
      height: 1.5rem;
      //position: absolute;
      //left: 2rem;
      //top: 1.3rem;
      background-color: #f8f8f8;
      border: 0.1rem solid #d6d2d2;
      border-radius: 0.2rem;
      margin-right: 1.2rem;
    }

    .file-box {
      flex: 1;
      //margin-left: 26px;
      font-family: HarmonyOS Sans SC;
      font-size: 11px;
      font-weight: 400;
      line-height: 1.6rem;
      text-align: left;
      //margin-left: 1.2rem;

      .tip_text {
        color: #4E5969;
      }
    }

    .file {
      color: var(--primary-color);
      cursor: pointer;
    }
  }

  .modal-box-bg {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .modal-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 0 0 1rem;
    z-index: 999;
    //border-top-left-radius: 10px;
    //border-top-right-radius: 10px;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.4rem;
      text-align: center;
      color: rgb(29, 33, 41);
      font-family: HarmonyOS Sans SC;
      font-size: 18px;
      font-weight: 500;
      padding: 0 1.6rem;
    }

    .pinch-zoom-container {
      height: auto !important;
    }

    .content {
      overflow: auto;
      height: calc(~'(100% - 10.8rem)');
      //padding: .2rem 0;
      //margin-bottom: 1rem;
      position: relative;

      .iframe-box {
        position: absolute;
        top: -5rem;
        left: 0;
        bottom: 0;
        right: 0;
      }
    }

    .footer {
      height: 6.4rem;
      padding: 0 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;

      .weui-btn_disabled {
        opacity: 0.5;
      }

      .weui-btn_warn {
        height: 4.4rem;
        color: rgb(255, 255, 255);
        font-family: HarmonyOS Sans SC;
        font-size: 16px;
        font-weight: 500;
        border-radius: 40px;
        background: linear-gradient(90.00deg, var(--gradient2-color), var(--primary-color));
        //background: linear-gradient(270.00deg, var(--primary50-color), var(--primary-color));
      }

      //button.weui-btn {
      //  background-color: #FF4A32;
      //}
    }
  }
}
</style>
